<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <!--

            使用栅格系统

                前提需要有一个布局容器:大的div里面指定boostrap的class属性
                 class="container":占用固定宽度并可以响应式
                 class="container-fluid":占用整个宽度100%(全部视图)


                栅格系统:
                    栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

                    一行可以指定多少列(一行最多12列)
                    class="col-设备编号-列数"

                            设备编号
                                xs      超小屏幕    (手机端)        <768px

                                sm      小屏幕(平板电脑)           >=768px

                                md      中等屏幕(普通桌面显示器)   ≥992px

                                lg      大屏幕 大桌面显示器      >=1200px
    -->
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<!--定义一个布局容器
    container-fluid:支持流式布局
-->
<div class="container-fluid">
    <!--
            定义一行:class="row"
        -->
    <div class="row">
        <div class="col-md-4" style="border: 1px solid #000">logo部分</div>
        <div class="col-md-4" style="border: 1px solid #000">导航部分</div>
        <div class="col-md-4" style="border: 1px solid #000">超链接</div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>


<hr/>

<!--手机屏幕,平板.桌面显示器-->

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

    </div>

</body>
</html>